@import "~asha/_.less";

.add-box{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right:0;
    z-index: 100;
    cursor: default;
    .add-mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        position: relative;
        z-index: 101;
    }
    .add-box-container{
        width: 800px;
        height: 600px;
        margin-top: -300px;
        margin-right: -400px;
        position: fixed;
        top: 50%;
        right: 50%;
        z-index: 102;
        background-color: #fff;
        padding: 26px;
        .title{
            height: 40px;
            .ion-close{
                position: absolute;
                right: 30px;
                top: 25px;
                .text-color(@color_font_2,@color_font_2);
                font-size: 22px;
            }
        }
        .add-box-btn-group{
            text-align: center;
            padding: 20px;
            .cancel{
                .btn-outline-style;
                width: 70px;
            }
            .confirm{
                .btn-style;
                width: 70px;
                margin-left: 15px;
            }
        }
        .add-box-table{
            width: 100%;
            height: 440px;
            overflow: hidden;
            position: relative;
            .table-head{
                position: absolute;
                width: 100%;
                top: 0;
                .ad-table{
                    // width: 100%;
                        thead{
                            tr{
                                height: 40px;
                                color: #fff;
                                th{
                                    width: 93px;
                                    background-color: @color_a;
                                    border-right: 1px solid #fff;
                                }
                                th:first-child{
                                    .border-radius-all(5px,0,0,0);
                                }
                                th:last-child{
                                    .border-radius-all(0,5px,0,0);
                                }
                            }
                        }
                }
            }
            .table-body{
                position: absolute;
                top: 40px;
                overflow: scroll;
                height: 400px;
                .ad-table{
                    // width: 100%;
                    tbody{
                        tr{
                            height: 40px;
                            text-align: center;
                            td{
                                width: 93px;
                                text-align: center;
                                height: 40px;
                                border: 1px solid #e5e6e7;
                                a{
                                    .text-color;
                                    margin: 0 8px;
                                    &:hover{
                                        text-decoration: underline;
                                    }
                                }
                                .table-edit{
                                    .input-style;
                                    .border-radius(0);
                                    height: 100%;
                                    width: 100%;
                                }
                            }
                        }
                        tr:nth-child(even){
                            background-color: #f8f8f8;
                        }
                        tr:nth-child(odd){
                            background-color: #fff;
                        }
                        .option{
                            width: 93px;
                            .finish{
                                .btn-style(@color_success);
                                width: 20px;
                                height: 20px;
                                text-align: center;
                                line-height: 20px;
                                .border-radius(10px);
                            }
                            .delete{
                                .btn-style(@color_error);
                                width: 20px;
                                height: 20px;
                                text-align: center;
                                line-height: 20px;
                                .border-radius(10px);
                                margin-left: 10px;
                            }
                            .edit{
                                .btn-style(@color_a);
                                width: 20px;
                                height: 20px;
                                text-align: center;
                                line-height: 20px;
                                .border-radius(10px);
                            }
                            .cancel{
                                .btn-style(@color_error);
                                width: 20px;
                                height: 20px;
                                text-align: center;
                                line-height: 20px;
                                .border-radius(10px);
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
        }
    }
}